<script setup lang='ts'>
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
import NotLayoutPage from '../compoments/notlayoutpage.vue'
import { type FormInstance, type FormItemRule } from 'element-plus';
import { IdCard, RealName } from '../validate';
import { isPhone, } from '@pureadmin/utils';
import { useDark } from '@vueuse/core'
import countrys from '@/assets/countryCodeAndPhoneCode.json'
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import { AnchorApplayInfo, AnchorInfoBase, applayAnchor, getAnchorApplayInfo } from '@/api/cooperation';
import { getApplayAnchorSelect, FormatedApplayAnchorSelect } from '@/api/common';
import { message } from '@/utils/message';
const env = import.meta.env
defineOptions({
  name: 'AnchorCooperation'
})
const router = useRouter(),
  route = useRoute()

const CollaborationStatusWithInstitutions = reactive([
  '合作信息己方确认中...',
  '合作信息对方确认中...',
  '等待对方确认协议...',
  '等待己方确认议...',
  '己方协议签署中...',
  '对方协议签署中...',
  '合作中...',
  '合约即将到期...',
  '合约已到期...',
])
const isCommentary = computed(() => !!route.params.registryType)
const title = computed(() => isCommentary.value ? '解说注册' : '主播注册')

// 用于表格选择的原始数据
const selectInfo = reactive<FormatedApplayAnchorSelect>({})
const isDark = useDark()

// 是否已经申请过了
const isApplayed = ref(false)

onMounted(() => {
  getApplayAnchorSelect().then((data) => {
    Object.assign(selectInfo, data)
  })
  getAnchorApplayInfo().then(({ data }) => {
    isApplayed.value = true
    Object.assign(formModel, data)
  }, e => {
    console.error(e.message);
  })
})
const formModel = reactive<AnchorInfoBase>(env.DEV ? {
  "IdNumber": "100000199712144511", "live_time": "5", "game_type": "5", "liveNumber": "11", "livePlatformId": "1", "tellphone": "13131313131", "relName": "熊大", "agree": 1,
  type: isCommentary.value ? 2 : 1
} : { IdNumber: '', type: isCommentary.value ? 2 : 1 })

const formRule = reactive<Partial<Record<keyof AnchorInfoBase, FormItemRule[]>>>({

  relName: [
    { required: true, message: '请输入真实的姓名' },
    { pattern: RealName, message: '请输入2-10位文字' },
  ],
  tellphone: [
    { required: true, message: '请输入您的手机号码' },
    {
      validator: (r, v, c) => {
        if (isPhone(v)) {
          c()
        } else {
          c(new Error('请输入正确的手机号码'))
        }
      }
    },
  ],
  IdNumber: [
    { required: true, message: '请输入您的身份证号码' },
    { type: 'string', pattern: IdCard, message: '请输入正确的身份证号码' },
  ],
  livePlatformId: [
    { required: true, message: '请选择你的直播平台' },
  ],
  game_type: [
    { required: true, message: '请选择你擅长的游戏类型' },
  ],
  liveNumber: [
    { required: true, message: '请输入你的直播间号/地址' },
  ],
  agree: [
    {
      validator: (r, v, c) => {
        if (isApplayed.value) {
          c()
        } else if (!v) {
          c(new Error('请同意主播合作协议'))
        } else {
          c()
        }
      }
    },
  ],
})
const formRef = ref<FormInstance>()
async function submit() {
  await formRef.value.validate()
  applayAnchor(formModel)
    .then(d => {
      console.log(d);
      message('提交成功', { type: 'success' })
    }, e => {
      message(e.message, { type: 'error' })
    })
}
</script>

<template>
  <NotLayoutPage>
    <ElCard>
      <template #header>
        <h2><span>{{ title }}</span> <span class="text-amber-400 text-sm">{{ isApplayed ? '审核中...' : '' }}</span></h2>
      </template>
      <div class="w-2/5 mx-auto">
        <ElForm :disabled="isApplayed" ref="formRef" label-position="top" :model="formModel" :rules="formRule">
          <ElFormItem label="姓名" prop="relName">
            <ElInput placeholder="请输入真实姓名" v-model="formModel.relName"></ElInput>
          </ElFormItem>
          <ElFormItem label="手机号" prop="tellphone">
            <ElInput placeholder="请输入您的手机号码" v-model="formModel.tellphone"></ElInput>
          </ElFormItem>
          <ElFormItem label="身份证号码" prop="IdNumber">
            <ElInput placeholder="请输入您的身份证号码" v-model="formModel.IdNumber"></ElInput>
          </ElFormItem>
          <ElFormItem label="您所在的直播平台" prop="livePlatformId">
            <ElSelect placeholder="选择您直播所在的平台" v-model="formModel.livePlatformId">
              <ElOption v-for="[id, label] of selectInfo.live_platform" :value="id" :label="label"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="您的直播间号" prop="liveNumber">
            <ElInput placeholder="请输入您的直播房间号" v-model="formModel.liveNumber"></ElInput>
          </ElFormItem>
          <ElFormItem label="您擅长的游戏类型" prop="game_type">
            <ElSelect placeholder="选择您擅长的游戏类型" v-model="formModel.game_type">
              <ElOption v-for="[id, name] of selectInfo.game_type" :value="id" :label="name"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="您的直播经验" prop="live_time">
            <ElSelect placeholder="选择您的直播经验" filterable v-model="formModel.live_time">
              <ElOption v-for="[id, label] of selectInfo.live_time" :value="id" :label="label"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElButton v-if="formModel.state === 2" text type="primary"
            @click="router.push({ name: 'cooperation-anchor-orglist' })">加入机构</ElButton>
          <!-- <ElFormItem v-if="formModel.state === 2" label="所属机构">
            <ElButton text type="primary">机构名</ElButton> <span>{{ CollaborationStatusWithInstitutions.at(1) }}</span>
          </ElFormItem> -->
          <ElFormItem v-if="formModel.state === 2" label="所属经纪人">
            <ElButton text type="primary">经纪人名</ElButton>
          </ElFormItem>
          <div v-show="!isApplayed" class="text-center text-zinc-400 text-sm">请认真核对您的信息，有助于更快通过审核！</div>
          <ElFormItem v-show="!isApplayed" prop="agree">

            <div class="text-center w-full self-center text-sm flex items-center justify-center gap-2">
              <ElCheckbox :false-value="0" :true-value="1" v-model="formModel.agree"></ElCheckbox>
              <div>
                <span>我已阅读并同意</span>
                <span class="text-blue-500">《主播合作协议》</span>
              </div>
            </div>
            <template #error="{ error }">
              <div class="text-center w-full text-red-400 text-sm">{{ error }}</div>
            </template>
          </ElFormItem>
        </ElForm>

        <div v-show="isApplayed" class="text-center text-zinc-400 text-sm">
          <span>审核时长</span>
          <span class="text-blue-500">2个工作日以内</span>
        </div>
        <div v-if="!isApplayed" class="flex justify-center mt-4">
          <ElButton :disabled="isApplayed" style="padding:0 6rem;" @click="submit" type="primary">
            {{ isApplayed ? '审核中...' : '注册' }}
          </ElButton>
        </div>
      </div>
    </ElCard>
  </NotLayoutPage>
</template>

<style lang='scss' scoped></style>
